<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Samsung 网格加载效果 | Demo 2</title>
		<meta name="description" content="Grid Loading and Hover Effect: Recreating Samsung's grid loading effect" />
		<meta name="keywords" content="grid loading, swipe, effect, slide, masonry, web design, tutorial" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
		<style>
		body {
			background: #444;
		}
		.codrops-demos a.current-demo {
			color: #999;
		}
		.codrops-header h1 {
			margin-top: 50px;
			font-family: 'Microsoft Yahei';
			color: #fff;
		}
		</style>
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<header class="codrops-header">
				<h1>Samsung 网格加载效果</h1>	
				<nav class="codrops-demos">
					<a href="index.html">效果一</a>
					<a class="current-demo" href="index2.html">效果二</a>
					<a href="index3.html">效果三</a>
				</nav>
			</header>
			<section class="grid-wrap">
				<ul class="grid swipe-down" id="grid">
					<li><a href="http://www.behance.net/gallery/15944679/Kenpo-News-April-2014-issue"><img src="img/1.jpg" alt="img01"><h3>Kenpo News April 2014 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15758125/SQUET-April-2014-issue"><img src="img/2.jpg" alt="img02"><h3>SQUET April 2014 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15586227/MONOCLE-issue-72"><img src="img/3.jpg" alt="img03"><h3>MONOCLE issue 72</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11880495/TOWN-Winter-2013"><img src="img/4.jpg" alt="img04"><h3>TOWN Winter 2013</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11455333/Quarterly-Musashino-autumn-of-2013-issue"><img src="img/5.jpg" alt="img05"><h3>Quarterly Musashino autumn of 2013 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/12866129/MONOCLE-issue-69"><img src="img/6.jpg" alt="img06"><h3>MONOCLE issue 69</h3></a></li>
					<li><a href="http://www.behance.net/gallery/16631085/Real-Simple-May-2014"><img src="img/7.jpg" alt="img07"><h3>Real Simple May 2014</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11727343/The-65th-Book-Week"><img src="img/8.jpg" alt="img08"><h3>The 65th Book Week</h3></a></li>
					<li><a href="http://www.behance.net/gallery/16631085/Real-Simple-May-2014"><img src="img/9.jpg" alt="img09"><h3>Real Simple May 2014</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15566747/Quarterly-Musashino-spring-of-2014-issue"><img src="img/10.jpg" alt="img10"><h3>Quarterly Musashino spring of 2014 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11134427/MAJESTY-express-vol-01"><img src="img/11.jpg" alt="img11"><h3>MAJESTY express vol. 01</h3></a></li>
					<li><a href="http://www.behance.net/gallery/13329103/Shitamachi-Rocket"><img src="img/12.jpg" alt="img12"><h3>Shitamachi Rocket</h3></a></li>
					<li><a href="http://www.behance.net/gallery/13285315/Quarterly-Musashino-winter-of-2013-issue"><img src="img/13.jpg" alt="img13"><h3>Quarterly Musashino winter of 2013 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/16541811/MAINICHI-CHUUGOKUGO-May-2014"><img src="img/14.jpg" alt="img14"><h3>MAINICHI CHUUGOKUGO April 2014</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15944679/Kenpo-News-April-2014-issue"><img src="img/1.jpg" alt="img01"><h3>Kenpo News April 2014 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15758125/SQUET-April-2014-issue"><img src="img/2.jpg" alt="img02"><h3>SQUET April 2014 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15586227/MONOCLE-issue-72"><img src="img/3.jpg" alt="img03"><h3>MONOCLE issue 72</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11880495/TOWN-Winter-2013"><img src="img/4.jpg" alt="img04"><h3>TOWN Winter 2013</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11455333/Quarterly-Musashino-autumn-of-2013-issue"><img src="img/5.jpg" alt="img05"><h3>Quarterly Musashino autumn of 2013 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/12866129/MONOCLE-issue-69"><img src="img/6.jpg" alt="img06"><h3>MONOCLE issue 69</h3></a></li>
					<li><a href="http://www.behance.net/gallery/16631085/Real-Simple-May-2014"><img src="img/7.jpg" alt="img07"><h3>Real Simple May 2014</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11727343/The-65th-Book-Week"><img src="img/8.jpg" alt="img08"><h3>The 65th Book Week</h3></a></li>
					<li><a href="http://www.behance.net/gallery/16631085/Real-Simple-May-2014"><img src="img/9.jpg" alt="img09"><h3>Real Simple May 2014</h3></a></li>
					<li><a href="http://www.behance.net/gallery/15566747/Quarterly-Musashino-spring-of-2014-issue"><img src="img/10.jpg" alt="img10"><h3>Quarterly Musashino spring of 2014 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/11134427/MAJESTY-express-vol-01"><img src="img/11.jpg" alt="img11"><h3>MAJESTY express vol. 01</h3></a></li>
					<li><a href="http://www.behance.net/gallery/13329103/Shitamachi-Rocket"><img src="img/12.jpg" alt="img12"><h3>Shitamachi Rocket</h3></a></li>
					<li><a href="http://www.behance.net/gallery/13285315/Quarterly-Musashino-winter-of-2013-issue"><img src="img/13.jpg" alt="img13"><h3>Quarterly Musashino winter of 2013 issue</h3></a></li>
					<li><a href="http://www.behance.net/gallery/16541811/MAINICHI-CHUUGOKUGO-May-2014"><img src="img/14.jpg" alt="img14"><h3>MAINICHI CHUUGOKUGO April 2014</h3></a></li>
				</ul>
			</section>
		</div><!-- /container -->
		<div class="footer-banner" style="width:728px; margin:160px auto 100px"></div>
		<script src="js/masonry.pkgd.min.js"></script>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/classie.js"></script>
		<script src="js/colorfinder-1.1.js"></script>
		<script src="js/gridScrollFx.js"></script>
		<script>
			new GridScrollFx( document.getElementById( 'grid' ), {
				viewportFactor : 0.4
			} );
		</script>
		<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
		<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
	</body>
</html>